<template>
    <div class="list">

  <view class="list_background">
  
    <view v-if="goodsList.length>0" class="list_goods">
            <view @click="goToDetail(item)" v-for="(item,index) in goodsList" :key="index" class="item">
              <uv-image  mode='widthFix' :lazy-load="true" :src="item.imgUrl" width="100%" ></uv-image>
               <view class="item_title">
              
                  <p class="span_p" style="text-align: left;font-size: 24rpx;">
                      <view style="margin-right: 5rpx;" class="nianhuo">
                      {{ item.tips || '上新商品' }}
                  </view>
                  
                  <text>
                      {{ item.goodsTitle }}
                  </text>
                      </p>
               </view>
  
               <view class="prive_title">
  
                  <span class="price_red">￥{{ item.goodsPrice }} </span>
  
                  <span class="price_scale">已售{{ item.goodsSold }} </span>
               </view>
  
               <view style="display: none;" class="margin_top_bottom">
               <view class="box1">多人拼团</view>
               <view class="box2">
                <view class="quan">券</view>
                <view class="quan2">满100元减30</view>
               </view>
               </view>
  
               <view class="shopmall"> {{ item.shopName || '无店铺' }} 	<uv-icon name="arrow-right" color="#8D8D8D" size="12"></uv-icon></view>
            </view>
  
          
  
      </view>
  
     <view style="margin-top: 100rpx;" v-else>
      <uv-empty text="搜到的商品为空，请重新搜索吧" iconColor="#fff" mode="car" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
     </view>
  </view>
  
    </div>
  </template>
  
  <script setup>
  
  import { onShow ,onReachBottom} from '@dcloudio/uni-app';
  import { ref, watch } from 'vue'
  import {getGoodsList} from '../https/api/list'
  let inputSearch = ref(null)
  import {categoryInfo,pageProd} from '../https/api/catgriy'
  
  let sizeNum = ref(14)
  let totalNum = ref(0)
  let sortNum = ref(0)
  onReachBottom(()=>{
  
      if(totalNum.value>=sizeNum.value){
          sizeNum.value += 14
          getGoodsListData({ current: 1,
        prodName: inputSearch.value,
        size: sizeNum.value,
        sort: sortNum.value})
      }else{
          uni.showToast({
              title:'没有更多了',
              icon:'none'
          })
          
      }
      
  })
  
  
  
  
  let goToDetail = (item) => {
      uni.setStorageSync('goodsDetailData',JSON.stringify(item))
      uni.navigateTo({
          url:'/pages/goodsDetail',
  
      })
  }

  
 
  onShow(async()=>{
    let catInfo = uni.getStorageSync('catInfo')
    let res = await pageProd({
    categoryId:JSON.parse(catInfo).categoryId
  })
  goodsList.value = res.data.records.map(v=>{
          return {
              ...v,
              imgUrl:v.pic,
              goodsPrice:v.price,
              goodsTitle:v.prodName,
              goodsSold:v.prodId,
              
           }
      })
  })
  
  
  let goodsList = ref([])
 
  
  
  let sts = ref(0)

  </script>
  
  <style lang="scss" scoped>
  
  .list_goods{
      padding: 20rpx;
      .prive_title{
          margin-top: 8rpx;
          padding: 0 15rpx;
      }
      .shopmall{
          margin-top: 10rpx;
          display: flex;
    color: #8D8D8D;
    font-size: 22rpx;
    margin-bottom: 20rpx;
    padding: 0 15rpx;
      }
      .margin_top_bottom{
          padding: 0 15rpx;
          margin-bottom: 8rpx;
          margin-top: 6rpx;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .box1{
              margin-right: 20rpx;
              border: 1px solid #FF1C23;
              width: 85rpx;
              height: 30rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #DF0024;
              font-size: 18rpx;
          }
  .box2{
      display: flex;
      align-items: center;
      margin-right: 20rpx;
  }
        .quan{
          padding: 1rpx;
          border: 1px solid #FF1C23;
          border-right: 1px dashed #FF1C23;
          color: #DF0024;
          font-size: 18rpx;
        }
        .quan2{
          padding: 1rpx;
          border: 1px solid #FF1C23;
          border-left: none;
          color: #DF0024;
          font-size: 18rpx;
        }
  
      
  
      }
      .price_red{
          color: #FF1C23;
          font-size: 31rpx;
      }
      .price_scale{
          margin-left: 20rpx;
          color:#8D8D8D;
          font-size:22rpx;
      }
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .item{
          margin-bottom: 20rpx;
          width: 49%;
       border-radius: 15rpx;
       background: white;
       .item_title{
          font-size: 25rpx;
          padding: 0 15rpx;
          margin-top: 15rpx;
          
          align-items: center;
      }
      .span_p{
          overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;  // 控制多行的行数
      -webkit-box-orient: vertical;
  
  
      }
      .nianhuo{
          display: inline-block;;
          border-radius: 10rpx;
          vertical-align: middle;
          font-size: 20rpx;
          background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
          // width: 54rpx;
          height: 28rpx;
          text-align: center;
          color: white;
          font-weight: bolder;
          line-height: 28rpx;
         display: inline-block;
      }
      }
      
  }
  
  .list_background{
    height: 90vh;
    border-top: 1px solid transparent;
    background: #F5F6F8FF;
   
  }
  .tabs_item{
      font-size: 25rpx;
  }
  
  .tabs_item_active::after{
    position: absolute;
    content: '';
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15rpx;
   
    height: 3rpx;
    background:#DF0024FF ;
    
  }
  .tabs{
    padding: 0rpx 60rpx;
    padding-bottom: 15rpx;
    color: #8D8D8DFF;
    font-family: Microsoft YaHei;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .tabs_item_active{
    transition: all .5s;
   position: relative;
   color: #DF0024FF;
  }
  .input_search{
    padding: 20rpx;
  }
  </style>